<template>
  <cascader
    :options="options"
    :placeholder="placeholder"
    :disabled="disabled"
    :show-search="{ filter }"
    v-model="currentValue"
    :allowClear="allowClear"
    @change="handleChange" />
</template>
<script>
import { Cascader } from 'ant-design-vue'
import PropTypes from 'ant-design-vue/es/_util/vue-types'
import { DISTRICT_DATA } from '@/components/Easy/data-entry/district-data'

export default {
  name: 'EDistrict',
  components: { Cascader },
  props: {
    mode: PropTypes.string.def(),
    placeholder: PropTypes.string.def(''),
    disabled: PropTypes.bool.def(false),
    allowClear: PropTypes.bool.def(true),
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array])
  },
  data () {
    return {
      options: DISTRICT_DATA,
      currentValue: this.value
    }
  },
  watch: {
    value (newValue) {
      this.currentValue = newValue
    }
  },
  methods: {
    handleChange () {
      this.$emit('input', this.currentValue)
      this.$emit('change', this.currentValue)
    },
    filter (inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    }
  }
}
</script>
